<template>
    <div class="thumb" :style="thumbStyle" :class="{'gray': isGray}">
      <div class="thumb-img" :class="imageClass" :style="imageStyle"></div>
    </div>
</template>
<script>
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    thumb: String,
    styleType: {
      type: String,
      default: "square" // circle
    },
    sizeType: {
      type: String,
      default: "cover" // contain
    },
    isGray: {
      type: Boolean,
      default: false
    },
    border: {
      type: String,
      default: "none"
    }
  },
  created() {},
  mounted() {},
  data() {
    return {};
  },
  computed: {
    thumbStyle() {
      return {
        width: this.width,
        height: this.height
      };
    },
    thumbSrc() {
      return this.$options.filters.fullImagePath(this.thumb);
    },
    imageClass() {
      const classes = `${this.styleType} ${this.sizeType}-size`;
      return classes;
    },
    imageStyle() {
      return {
        border: this.border,
        backgroundImage: "url(" + this.thumbSrc + ")"
      };
    }
  },
  methods: {},
  components: {}
};
</script>
<style>
.thumb {
}
.thumb-img {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.cover-size {
  background-size: cover;
}
.contain-size {
  background-size: contain;
}
.square {
  border-radius: 0;
}
.circle {
  border-radius: 50%;
}
.gray {
  filter: Gray;
  -webkit-filter: grayscale(100%);
}
</style>
